<template>
	<view>
		<view class="back flex_dq">
			<image src="../../static/icon/left_jt.png" mode="aspectFill" @click="goBack"></image>
		</view>
		<view class="swipers">
			<u-swiper :list="bannerList" keyName="image_path" height="375" indicator circular
				bgColor="transparent"></u-swiper>
		</view>
		<view class="commodity flex_Z" v-if="hasoption">
			<view class="commodity_l flex_ld">
				<view class="flex_dq">
					<view class="commodity_l_m flex_dq">
						<text class="hot" v-if="goodsInfos.discount">折扣价</text>
						<text class="daol">￥</text>
						<text :class="checkLength(money1)>6 ? 'namess':'names'">{{ money1}}</text>
						<text class="discounts" v-if="goodsInfos.discount">￥{{goodsInfos.discount_price}}</text>
						<view class="gives " v-if="goodsInfos.type ==5">
							<text class="">赠送</text>
							<image class="gives_img" src="../../static/image/fhyb.png" mode=""></image>
							<text>{{goodsInfos.balance_hf || 0}}</text>
						</view>
					</view>
				</view>
				<text>库存:{{skuDetail.stock}}</text>
			</view>
			<view class="goods_names ">
				<text v-if="goodsInfos.discount" class="fracture">折</text>
				<text class="daxiao">{{goodsInfos.name}}</text>
			</view>
		</view>

		<view class="commodity flex_Z" v-else>
			<view class="commodity_l flex_ld">
				<view class="flex_dq">
					<view class="commodity_l_m flex_dq">
						<text class="hot" v-if="goodsInfos.discount">折扣价</text>
						<text class="daol">￥</text>
						<text :class="checkLength(money2)>6 ? 'namess':'names'">{{money2}}</text>
						<text class="discounts" v-if="goodsInfos.discount">￥{{goodsInfos.discount_price}}</text>
						<view class="gives " v-if="goodsInfos.type == 5">
							<text class="">赠送</text>
							<image class="gives_img" src="../../static/image/fhyb.png" mode=""></image>
							<text>{{goodsInfos.balance_hf || 0}}</text>
						</view>
					</view>
				</view>
				<text>库存:{{goodsInfos.stock}}</text>
			</view>
			<view class="goods_names ">
				<text v-if="goodsInfos.discount" class="fracture">折</text>
				<text class="daxiao">{{goodsInfos.name}}</text>
			</view>
		</view>

		<view class="commodity_detail flex_Z">
			<text>商品详情</text>
			<view class="rich_text">
				<rich-text class="quanyi" :nodes="nodeCentent"></rich-text>
			</view>
		</view>
		<view class="empty2"></view>
		<view class="btn_now flex_c" v-if="noSale">
			<view class="no_sale flex_c" @click="noBuy">
				<text>非卖品</text>
			</view>
		</view>
		<view class="btn_now flex_c" v-else>
			<view class="ljgm flex_c" @click="isPayShow">
				<text>立即购买</text>
			</view>
		</view>

		<!-- 支付弹窗 -->
		<u-popup :show="payShow" @close="payShow = false"    bgColor="transparent">
			<view >
				<view class="preview" v-if="previewShow" @click="previewShow = false">
					<image :src="yulanImg" mode="aspectFill"></image>
					<u-icon name="close" class="close_gb" color="#ffffff" size="24"></u-icon>
				</view>
				<view class="pay">
					<view class="pay_box flex_Z">
						<view v-if="hasoption">
							<view class="goods flex_dq">
								<view class="goods_box flex_dq" @click="enlarge(skuDetail.thumb)">
									<image :src="skuDetail.thumb" mode="aspectFill"></image>
								</view>
								<view class="describe flex_Z">
									<view class="describe_box flex_dq">
										<text>￥</text>
										<text>{{(skuDetail.present_price * this.numbers).toFixed(2)}}</text>
									</view>
									<text>{{skuDetail.title}}</text>
								</view>
							</view>
							<view class="stocks ">
								<text>库存:{{skuDetail.stock}}</text>
							</view>
							<view v-for="(item,index) in productList" :key="index">
								<view class="model martb flex_Z">
									<view class="model_box flex_ld">
										<text>{{item.title}}</text>
									</view>
									<view class="model_li ">
										<text :class="item2.state?'active1':''"
											v-for="(item2,index2) in item.goods_spec_item" :key="index2"
											@click="changeScale(index,item2)">{{item2.title}}</text>
									</view>
								</view>
							</view>
							<view class="model flex_ld">
								<view class="model_box flex_ld">
									<text>购买数量</text>
									<u-number-box integer :min="1" :max="skuDetail.stock" button-size="36" color="#333333"
										bgColor="#2E2A56" iconStyle="color: #ffffff" v-model.trim="numbers"
										@overlimit="overLimit"></u-number-box>
								</view>
							</view>
						</view>
				
						<view v-else>
							<view class="goods flex_dq">
								<view class="goods_box flex_dq"  @click="enlarge(goodsInfos.images)">
									<image :src="goodsInfos.images" mode="aspectFill"></image>
								</view>
								<view class="describe flex_Z">
									<view class="describe_box flex_dq">
										<text>￥</text>
										<text>{{(goodsInfos.present_price * this.numbers).toFixed(2)}}</text>
									</view>
									<text>{{goodsInfos.name}}</text>
								</view>
							</view>
							<view class="empty"><!-- 加高度 --></view>
							<view class="model flex_ld">
								<view class="model_box flex_ld">
									<text>购买数量</text>
									<u-number-box integer :min="1" :max="goodsInfos.stock" button-size="36" color="#333333"
										bgColor="#2E2A56" iconStyle="color: #ffffff" v-model.trim="numbers"
										@overlimit="overLimit"></u-number-box>
								</view>
							</view>
						</view>
					</view>
					<view>
						<view class="buyNow flex_c" v-if="hasoption">
							<image v-if="skuDetail.stock>0" class="highlights" src="../../static/image/mask.png" mode="">
							</image>
							<text class="buyNow_txt" v-if="skuDetail.stock>0" @click="goSettlement">立即支付</text>
							<text class="no_stock" v-else>已售罄</text>
						</view>
						<view class="buyNow flex_c" v-else>
							<image v-if="goodsInfos.stock>0" class="highlights" src="../../static/image/mask.png" mode="">
							</image>
							<text class="buyNow_txt" v-if="goodsInfos.stock>0" @click="goSettlement">立即支付</text>
							<text class="no_stock" v-else>已售罄</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		goodsInfo,
	} from "../../api/shopp.js";
	export default {
		data() {
			return {
				gid: '', //商品id
				nodeCentent: '', //富文本
				yulanImg:'',
				numbers: 1, //步进器
				hasoption: 0,
				payShow: false, //弹窗
				previewShow:false, //预览
				noSale: 0, //非卖品
				skuDetail: {},
				goodsInfos: {},
				bannerList: [], //轮播图
				goodsSku: [],
				productList: [],
				money1: 0,
				money2: 0,
			}
		},
		onLoad(e) {
			this.gid = e.id
		},
		onShow() {
			this.goodsDetails()
			this.payShow = false
			this.previewShow = false
		},
		methods: {
			// 动态计算字体大小
			checkLength(v) {
				console.log(v);
				const realLength = v.length;
				console.log(realLength);
				return realLength;
			},
			// 立即购买弹窗
			isPayShow() {
				this.payShow = true
			},
			// 非卖品
			noBuy() {
				uni.$u.toast('该藏品为非卖品!');
			},
			// 返回
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			// 步进器
			overLimit(e) {
				// console.log(e);
				if (e == 'plus') {
					uni.$u.toast('超出限购数量');
				} else {
					uni.$u.toast('最少限购1个');
				}
			},
			// 预览图片
			enlarge(img) {
				this.yulanImg = img
				this.previewShow = true
			},
			// 详情
			goodsDetails() {
				let data = {
					id: this.gid
				}
				goodsInfo(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.goodsInfos = res.data
						this.money2 = (res.data.present_price * 1).toFixed(2)
						this.bannerList = res.data.thumbs
						this.hasoption = res.data.hasoption
						this.noSale = res.data.is_no_buy
						if (this.hasoption) {
							this.productList = res.data.goods_spec
							this.goodsSku = res.data.goods_sku
							// 进去默认显示第一个SKU商品的价格信息
							this.skuDetail = res.data.goods_sku[0]
							this.money1 = (res.data.goods_sku[0].present_price * 1).toFixed(2)
						}
						const regex = new RegExp('<img', 'gi');
						var htmlContent2 = res.data.content;
						htmlContent2 = htmlContent2.replace(regex, `<img style="max-width: 100%;margin:6px 0"`)
						this.nodeCentent = htmlContent2;
					}
				})
			},
			// 多规格 单规格计算 取sku里面对应的id
			changeScale(index, item) {
				console.log(index);
				console.log(item);
				this.productList[index].goods_spec_item.forEach((item2) => {
					// console.log(item2);
					item2.state = false
				})
				item.state = 1
				let aaaa = [];
				this.productList.forEach((item, index) => {
					this.productList[index].goods_spec_item.forEach((item2) => {
						// console.log(item2);
						if (item2.state) {
							aaaa.push(item2.id)
						}
					})
				})

				console.log(aaaa);
				let result = aaaa.join('_')
				console.log(result);
				this.goodsSku.forEach((item) => {
					if (item.specs == result) {
						this.skuDetail = item
						this.yulanImg = item.thumb
						console.log(this.skuDetail);
					}
				})
			},
			// 立即支付
			goSettlement() {
				let mallCacheInfo = {
					id: this.gid,
					type: this.goodsInfos.type,
					skuDetail: this.skuDetail,
					numbers: this.numbers,
					hasoption: this.hasoption,
					spaceId: '',
					chargingPoints: this.hasoption ? this.skuDetail.charging_points : this.goodsInfos.charging_points,
				}
				uni.setStorageSync('mallCacheInfo', mallCacheInfo)
				uni.navigateTo({
					url: '/pagesMy/shoppingCenter/settlementGoods'
				})
			},
		},
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.swipers {
		width: 100%;
		min-height: 680rpx;
		margin: 0 auto;
		z-index: 9;
	}

	.back {
		position: fixed;
		top: 30rpx;
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>image {
		width: 60rpx;
		height: 60rpx;
	}

	.commodity {
		width: 690rpx;
		/* height: 244rpx; */
		background: #F2F2F2;
		border-radius: 14rpx;
		margin: 24rpx auto;
		padding-bottom: 20rpx;
	}



	.commodity_l {
		padding: 30rpx 30rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.energy {
		width: 260rpx;
		height: 100rpx;
		/* background: pink; */
	}

	.energy>text {
		font-size: 22rpx;
		padding: 4rpx 16rpx;
		background: #B59E80;
		color: #ffffff;
		border-radius: 10rpx;
	}

	.commodity_l_m {
		/* color: #A68A64; */
	}

	.hot {
		font-size: 28rpx;
		color: #A68A64;
		margin-right: 6rpx;
	}

	.daol {
		font-size: 36rpx;
		color: #A68A64;
	}

	.discounts {
		font-size: 28rpx;
		color: #999999;
		margin-left: 10rpx;
		text-decoration-line: line-through;
	}

	.commodity_detail {
		width: 690rpx;
		/* min-height: 300rpx; */
		padding-bottom: 30rpx;
		background: #F2F2F2;
		margin: 0 auto;
		border-radius: 14rpx;

	}

	.commodity_detail>text {
		font-size: 36rpx;
		color: #3333330;
		margin: 40rpx 0 30rpx 24rpx;
	}

	.goods_names {
		font-size: 32rpx;
		color: #333333;
		padding: 0 30rpx;
	}

	.fracture {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		background: #A68A64;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 24rpx;
		background: #A68A64;
		padding: 2rpx 8rpx;
		margin-right: 6rpx;
	}

	.goods_names>image {
		width: 36rpx;
		height: 28rpx;
		margin: 0 10rpx;
	}

	.daxiao {
		width: 550rpx;
		/* background: pink; */
	}

	.rich_text {
		width: 92%;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 10rpx;
	}

	.quanyi {
		color: #666666;
		font-size: 24rpx;
		line-height: 1.6;
	}

	.btn_now {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 114rpx;
		background: #FCFCFB;
	}

	.ljgm {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 40rpx;
		font-size: 36rpx;
		color: #ffffff;
	}

	.no_sale {
		width: 690rpx;
		height: 80rpx;
		background: #b2b6b6;
		color: #ffffff90;
		border-radius: 40rpx;
		font-size: 36rpx;
	}
	.preview{
		position: relative;
		width: 750rpx;
		margin: 0 auto;
		padding: 20rpx 0;
	}
	.preview>image{
		width: 100%;
		height: 600rpx;
	}
	.close_gb{
		position: absolute;
		top: 30rpx;
		right:10rpx;
	}
	.pay {
		width: 100%;
		background: #F2F2F2;
		border-radius: 20rpx 20rpx 0 0;
		color: #ffffff;
		overflow: auto;
	}

	.buyNow {
		position: relative;
		width: 92%;
		margin: 50rpx auto;
	}

	.buyNow_txt {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.no_stock {
		text-align: center;
		width: 100%;
		background: #b2b6b6;
		color: #ffffff90;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.pay_box {
		width: 690rpx;
		margin: 56rpx auto 0;
		/* background: pink; */
	}

	.goods {
		width: 100%;
	}

	.goods_box {
		width: 220rpx;
		height: 220rpx;
		margin-right: 60rpx;
	}

	.goods_box>image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 24rpx;
	}

	.describe {
		/* width: 400rpx; */
		font-size: 32rpx;
		color: #333333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.describe_box {
		color: #A68A64;
		margin-bottom: 20rpx;
	}

	.describe_box>text:nth-child(1) {
		font-size: 36rpx;
	}

	.describe_box>text:nth-child(2) {
		font-size: 60rpx;
		font-weight: 700;
		/* font-family: 'iconfont'; */
	}

	.stocks {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #666666;
	}

	.model {
		width: 100%;
	}

	.martb {
		margin: 30rpx 0;
	}

	.model_box {
		width: 100%;
	}

	.model_box>text:nth-child(1) {
		font-size: 36rpx;
		color: #3D3D3D;
	}

	.model_box>text:nth-child(2) {
		font-size: 28rpx;
		color: #666666;
	}

	.model_li {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.model_li>text {
		height: 52rpx;
		line-height: 52rpx;
		background: #e7e7e7;
		border-radius: 6rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666666;
		padding: 0 20rpx;
		border: 1rpx solid #e7e7e7;
	}

	.active1 {
		color: #A68A64 !important;
		border: 1rpx solid #A68A64 !important;
	}

	.active2 {
		color: #A68A64 !important;
		border: 1rpx solid #A68A64 !important;
	}

	.eggColor {
		position: fixed;
		top: 200rpx;
		left: 160rpx;
		font-size: 24rpx;
		color: #D7BA93;
	}

	.names {
		font-size: 68rpx;
		font-family: 'iconfont';
		color: #A68A64;
	}

	.namess {
		font-size: 50rpx;
		text-overflow: ellipsis;
		color: #A68A64;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-family: 'iconfont';
	}

	.gives {
		height: 90rpx;
		line-height: 20rpx;
		/* background: pink; */
		font-size: 28rpx !important;
		color: #A68A64;
		text-align: center;
		padding: 10rpx 10rpx;
		border-radius: 0 20rpx 0 0;
		z-index: 10;
	}

	.gives_img {
		width: 32rpx;
		height: 24rpx;
		margin: 0 4rpx;
	}

	/deep/.u-number-box__minus {
		background: #A68A64 !important;
	}

	/deep/.u-number-box__plus {
		background: #A68A64 !important;
	}

	/deep/.u-number-box__input {
		background: #f2f2f2 !important;
	}
</style>